<template>
    <div id="tmpl">
        <div class="title">
            <h4 v-text="info.title"></h4>
            <p>发布时间：{{info.add_time}}   &nbsp;&nbsp;  点击数：{{info.click}}</p>
        </div>
        <div class="content" v-html="info.content">
        </div>
        <!--实现评论组件3.0 添加组件的占位符   //////在之前我们是不是要组件里面注册好我们的子组件-->
        <comment :id="id"></comment> <!--重要的一步：实现评论组件4.0 在父组件传值给子组件:id="id" -->
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import common from '../../kits/common.js';
//实现评论组件1.0 导入组件
import comment from '../subcom/comment.vue';

export default {
    data(){
        return {
            id:0,
            info:{}
        }
    },
    created(){
        //获取id的值      //这里千万注意！！！！！！！！！！！！要和路由规则的id对应起来
        this.id = this.$route.params.id;
        this.getinfo()
    },
    methods:{
        getinfo(){
            var url = common.apiurl + '/api/newsinfo.php?id='+ this.id;
            this.$http.get(url).then(function(res){
                var data = res.body;
                if(data.status != 0){
                    Toast(data.message);
                    return;
                }
                this.info = data.message
            })
        }
    },
    components:{
        comment,   //实现评论组件3.0 注册子组件
    }
}
</script>

<style scoped>
    .title h4{
        color:#0094ff;
    }
    .title p{
        color:rgba(0,0,0,0.4);
        padding-top: 0.2rem;
    }
    .title{
        padding: 5px 12px 5px 12px;
    }
    .content{
        padding: 0px 12px 20px 12px;
        line-height: 1.8rem;
        color:#333;
        text-indent:2em
    }

</style>